<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加题库</title>
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .container { padding: 20px 40px; }
        .form-row { margin-bottom: 15px; display: flex; align-items: center; }
        .form-row label { width: 100px; font-weight: bold; }
        .w150 { width: 150px; }
        .textarea { width: 98%; }
        .highlight-box {
            background: #e7f6f6;
            padding: 20px;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="layui-tab" lay-filter="tabFilter">
        <ul class="layui-tab-title">
            <li class="layui-this">添加试题</li>
            <li>在线组卷</li>
        </ul>
        <div class="layui-tab-content">

            <!-- 添加试题 -->
            <div class="layui-tab-item layui-show">
                <form class="layui-form" id="questionForm">

                    <div style="margin-bottom: 10px; font-weight: bold; color: #2d8cf0;">
                        当前添加试卷：<span id="currentSubjectText"></span>
                    </div>

                    <!-- 题目类型 -->
                    <div class="form-row">
                        <label>题目类型:</label>
                        <select name="type" lay-filter="questionType" id="questionType" class="w150">
                            <option value="选择题">选择题</option>
                            <option value="填空题">填空题</option>
                            <option value="判断题">判断题</option>
                        </select>
                    </div>

                    <!-- 公共字段 -->
                    <div class="form-row">
                        <label>所属章节:</label>
                        <input type="text" name="section" placeholder="请输入章节" class="layui-input w150" id="sectionInput">
                    </div>

                    <div class="form-row">
                        <label>难度等级:</label>
                        <select name="level" class="w150">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </div>

                    <!-- 正确选项仅限选择题 -->
                    <div class="form-row" id="rightOptionRow">
                        <label>正确选项:</label>
                        <select name="rightAnswer" class="w150">
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                        </select>
                    </div>

                    <!-- 选择题区域 -->
                    <div class="highlight-box" id="selectArea">
                        <div class="form-row">
                            <label>题目内容:</label>
                            <textarea name="question" placeholder="请输入选择题题干" class="layui-textarea textarea"></textarea>
                        </div>
                        <div class="form-row"><label>A</label><input type="text" name="a" placeholder="选项A" class="layui-input w150"></div>
                        <div class="form-row"><label>B</label><input type="text" name="b" placeholder="选项B" class="layui-input w150"></div>
                        <div class="form-row"><label>C</label><input type="text" name="c" placeholder="选项C" class="layui-input w150"></div>
                        <div class="form-row"><label>D</label><input type="text" name="d" placeholder="选项D" class="layui-input w150"></div>
                        <div class="form-row">
                            <label>解析:</label>
                            <textarea name="analysis" placeholder="答案解析" class="layui-textarea textarea"></textarea>
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="submitSelect">立即添加</button>
                    </div>

                    <!-- 填空题区域 -->
                    <div class="highlight-box" id="fillArea" style="display:none;">
                        <div class="form-row">
                            <label>题目内容:</label>
                            <textarea name="fill_question" placeholder="用括号标注空位" class="layui-textarea textarea"></textarea>
                        </div>
                        <div class="form-row">
                            <label>正确答案:</label>
                            <input type="text" name="fill_answer" class="layui-input w150">
                        </div>
                        <div class="form-row">
                            <label>解析:</label>
                            <textarea name="fill_analysis" class="layui-textarea textarea"></textarea>
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="submitFill">立即添加</button>
                    </div>

                    <!-- 判断题区域 -->
                    <div class="highlight-box" id="judgeArea" style="display:none;">
                        <div class="form-row">
                            <label>题目内容:</label>
                            <textarea name="judge_question" class="layui-textarea textarea"></textarea>
                        </div>
                        <div class="form-row">
                            <label>正确答案:</label>
                            <input type="radio" name="judge_answer" value="T" title="正确">
                            <input type="radio" name="judge_answer" value="F" title="错误">
                        </div>
                        <div class="form-row">
                            <label>解析:</label>
                            <textarea name="judge_analysis" class="layui-textarea textarea"></textarea>
                        </div>
                        <button class="layui-btn" lay-submit lay-filter="submitJudge">立即添加</button>
                    </div>
                </form>
            </div>

            <!-- 在线组卷 -->
            <div class="layui-tab-item">
                <form class="layui-form">
                    <div class="form-row">
                        <label>选择题数量：</label>
                        <input type="number" name="selectCount" class="layui-input w150">
                    </div>
                    <div class="form-row">
                        <label>填空题数量：</label>
                        <input type="number" name="fillCount" class="layui-input w150">
                    </div>
                    <div class="form-row">
                        <label>判断题数量：</label>
                        <input type="number" name="judgeCount" class="layui-input w150">
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="submitAutoCompose">立即组卷</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'element'], function(){
        const form = layui.form;
        const $ = layui.$;

        // 切换题目类型显示区域
        form.on('select(questionType)', function(data){
            const type = data.value;
            document.getElementById('currentSubjectText').textContent = subjectData.source || '未知试卷';
            document.getElementById('selectArea').style.display = type === '选择题' ? 'block' : 'none';
            document.getElementById('fillArea').style.display = type === '填空题' ? 'block' : 'none';
            document.getElementById('judgeArea').style.display = type === '判断题' ? 'block' : 'none';
            document.getElementById('rightOptionRow').style.display = type === '选择题' ? 'flex' : 'none';
        });

        const subjectData = JSON.parse(sessionStorage.getItem("currentSubject"));
        console.log(subjectData);

        // 提交选择题
        form.on('submit(submitSelect)', function(data){
            const formData = data.field;

            const payload = {
                questionId: 0,  // 新增时一般为0或null
                subject: subjectData.source,    // 可按需添加科目信息
                section: formData.section,
                answerA: formData.a,
                answerB: formData.b,
                answerC: formData.c,
                answerD: formData.d,
                question: formData.question,
                level: formData.level,
                rightAnswer: formData.rightAnswer,
                analysis: formData.analysis,
                score: 2 // 自定义默认分值数据库也是默认2分
            };

            // 发送 AJAX 请求
            fetch('/MultiQuestion', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            })
                .then(res => res.json())
                .then(res => {
                    if (res.code === 200) {
                        layer.msg('添加成功');
                    } else {
                        layer.msg('添加失败：' + res.message);
                    }
                })
                .catch(err => {
                    console.error('请求错误：', err);
                    layer.msg('网络错误，请稍后重试');
                });

            return false; // 阻止默认表单提交
        });

        // 提交填空题
        form.on('submit(submitFill)', function(data){
            console.log('填空题提交:', data.field);
            layer.msg('填空题已提交');
            return false;
        });

        // 提交判断题
        form.on('submit(submitJudge)', function(data){
            console.log('判断题提交:', data.field);
            layer.msg('判断题已提交');
            return false;
        });

        //提交选择题
        form.on('submit(submitAutoCompose)', function(data) {
            const formData = data.field;

            const payload = {
                subject: subjectData.source,        // 试卷名
                paperId: subjectData.paperId || 0, //
                changeNumber: parseInt(formData.selectCount) || 0,
                fillNumber: parseInt(formData.fillCount) || 0,
                judgeNumber: parseInt(formData.judgeCount) || 0
            };

            // 发送 POST 请求
            fetch('/item', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            })
                .then(res => res.json())
                .then(res => {
                    if (res.code === 200) {
                        layer.msg('组卷成功');
                    } else {
                        layer.msg('组卷失败：' + res.message);
                    }
                })
                .catch(err => {
                    console.error('请求出错：', err);
                    layer.msg('网络错误，请稍后重试');
                });

            return false; // 阻止表单默认提交
        });

    });
</script>

</body>
</html>
